import React from 'react'
import ReactDOM from 'react-dom'
import './css/stepLoadTable_cll1.css'

class StepLoadTable_cll1 extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      showBtn : 0
    }
  }
  theme = 'default dark'; //主题
  boxH = 0; //整体的高
  boxW = 0; //整体的宽度
  bodyH = 0; // 内容的高
  listH = 0; //列高
  allListMassage = []; //所有数据
  listMassage = []; //列表数据
  massageIndex = 1; 
  config = { //配置
      boxH : null,
      boxW : null,
      col : [], // 表头设置  {type:字段类型 'text' 字符串 'img' 图片,name:名称,width:宽度 0-1 ,align:'center/left/right',key :'listMassage 数据中的key值',textRow : 显示行数}
      titleH : 30, //头部的高
      titleStyle : {}, //color: #2274b9; font-size: 14px; font-weight: bold; background-color: #c9e7fe;
      listH : 30, //列高
      tableBorder : true, //边框
      fontStyle : {},
      special:false,//{colBegin : 1 , colEnd : 1, rowBegin : 0 , rowEnd :1000000,fontStyle : {fontSize:15}}
      overKey : null,
      clickCol : -1,
      stepLoad : true,
      partNumber : 15 //每次点击加载更多的时候加载的数目
  }
  componentWillMount = () => {
      if(this.props.theme !== undefined) this.theme = this.props.theme; 
      if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config);
  }
  componentDidMount = () => {
    this.boxH = (this.config.boxH == null) ? this.refs.box.parentNode.offsetHeight : this.config.boxH; 
    this.boxW = (this.config.boxW == null) ? this.refs.box.parentNode.offsetWidth : this.config.boxW; 
    this.bodyH = this.boxH - this.config.titleH; 
    this.setState() 
  }
  //设置大小
  setSize = (data) => {
      this.config = Object.assign(this.config,data);
      this.boxH = this.config.boxH;
      this.bodyH = this.boxH - this.config.titleH; 
      this.setState();
  }
  //刷新数据
  setTableMassage = (data) => {
      this.allListMassage = data;
      this.massageIndex = 0;
      this.addMore();
  }
  //点击加载更多 
  addMore = () => {
      if (!!this.config.stepLoad) {
        this.massageIndex ++;
        let endIndex = this.massageIndex * this.config.partNumber;
        if(this.allListMassage.length > endIndex){
            this.listMassage = this.allListMassage.slice(0,endIndex);
            this.setState({showBtn:0})
        }else{
            this.listMassage = this.allListMassage;
            this.setState({showBtn:1})
        } 
      } else {
        this.listMassage = this.allListMassage;
        this.setState();
      }
  }
  render () {
    let top = '',table = '',tableClone = '',endBtn = '';
    let isBorder = (this.config.tableBorder) ? 'tdBorder' : '';
    let dw = (this.config.tableBorder) ? -2 : 0;
    let useW = 0;
    top = <div className = 'tableTh_wrap' style = {{width: this.boxW + 10 + 'px', overflow:'hidden'}}>
                    {
                        this.config.col.map((item,i) => {
                            let lineHeight = (item.textRow != undefined && item.textRow != '') ? this.config.titleH / parseInt(item.textRow) : this.config.titleH;
                            let wid = 0;
                            if (i == this.config.col.length - 1) {
                                wid = this.boxW - useW;
                            } else {
                                wid =  Math.floor(this.boxW * item.width);
                                useW += wid;
                            }
                            return <div key = {'th' + i} className = {'tableTh ' + isBorder} style = {{height : this.config.titleH + 'px',lineHeight: lineHeight + 'px',width: wid, color: (!!this.config.titleStyle.color) ? this.config.titleStyle.color : '#fff', fontSize:(!!this.config.titleStyle.fontSize) ? this.config.titleStyle.fontSize : '14px', fontWeight:(!!this.config.titleStyle.fontWeight) ? this.config.titleStyle.fontWeight : 'bold', backgroundColor:(!!this.config.titleStyle.backgroundColor) ? this.config.titleStyle.backgroundColor :'#666'}}>{item.name}</div>})
                    }
                </div>
    table = <table>
                {
                    this.listMassage.map((item,i) => {
                        let overClass = ''
                        if(this.config.overKey !== null && item[this.config.overKey] == 1) {
                            overClass = 'overColor';
                        }
                        return <tr key = {'tr' + i}>
                            {
                                this.config.col.map((jItem,j) => {
                                    if(jItem.type == 'img'){
                                        {/*if(this.config.clickCol == j) {*/}
                                            return <td onClick = {() => this.props.clickItem(item)} style = {{textAlign:jItem.align,height:this.config.listH + dw + 'px'}} className = {isBorder} width = {this.boxW * jItem.width + dw} key = {'td' + j} ><img src = {item[jItem.key]} height = {this.config.listH - 6 }/></td>
                                        {/*}else{*/}
                                            {/*return <td  style = {{textAlign:jItem.align,height:this.config.listH + dw + 'px'}} className = {isBorder} width = {this.boxW * jItem.width + dw} key = {'td' + j} ><img src = {item[jItem.key]} height = {this.config.listH - 6 }/></td>*/}
                                        {/*}*/}
                                    }else{
                                        let fontStyle = this.config.fontStyle;
                                        if(this.config.special && this.config.special.colBegin <= j && this.config.special.colEnd >= j && this.config.special.rowBegin <= i && this.config.special.rowEnd >= i) {
                                            fontStyle = this.config.special.fontStyle;
                                        } 
                                        {/*if(this.config.clickCol == j) {*/}
                                            return <td onClick = {() => this.props.clickItem(item)} className = {isBorder} style = {{textAlign:jItem.align,height:this.config.listH + dw + 'px',backgroundColor:fontStyle.backgroundColor}} width = {this.boxW * jItem.width + dw} key = {'td' + j} ><span className = {overClass} style = {fontStyle}>{item[jItem.key]}</span></td>
                                        {/*}else{*/}
                                            {/*return <td className = {isBorder} style = {{textAlign:jItem.align,height:this.config.listH + dw + 'px',backgroundColor:fontStyle.backgroundColor}} width = {this.boxW * jItem.width + dw} key = {'td' + j} ><span className = {overClass} style = {fontStyle}>{item[jItem.key]}</span></td>*/}
                                        {/*}*/}
                                    }
                                })
                            }
                        </tr>
                    })
                }
            </table>
    let btnDisplay = (!!this.config.stepLoad) ? 'block' : 'none';
    if(this.state.showBtn == 0) {
        endBtn = <div onClick = {() => this.addMore()} className = 'addMore' style = {{width:this.boxW - 6 + 'px',display : btnDisplay}}>点击加载更多</div>
    }else{
        endBtn = <div className = 'addComplete' style = {{width:this.boxW - 6 + 'px',display : btnDisplay}} >数据已经全部显示</div>
    }
    return (
      <div ref= 'box' className = {this.theme + ' StepLoadTable_cll1'} >
            <div style = {{height: this.config.titleH + 'px' ,width: this.boxW + 'px',overflow:'hidden'}}>
                { top }
            </div>
            <div  style = {{height: this.bodyH,overflow:'hidden'}}>
                <div ref = 'content'  style = {{height : this.bodyH,width:this.boxW + 21 + 'px',overflowY:'scroll',overflowX:'hidden'}}>
                    { table }
                    { endBtn }
                </div>
            </div>
      </div>
    )
  }
}

export default StepLoadTable_cll1
